<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>chatGPT</title>

	<!-- for mobile screens -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- stylesheets are conveniently separated into components -->
	<link rel="stylesheet" media="all" href="./component/styles/setup.css">
	<link rel="stylesheet" media="all" href="./component/styles/says.css">
	<link rel="stylesheet" media="all" href="./component/styles/reply.css">
	<link rel="stylesheet" media="all" href="./component/styles/typing.css">
	<link rel="stylesheet" media="all" href="./component/styles/input.css">
	<style>
	body {
		background: #dcdde0;
	}
	.bubble-container {
		height: 100vh;
	}
	.bubble-container .input-wrap textarea {
		margin: 0;
		width: calc(100% - 30px);
	}
	</style>
</head>
<body>

<!-- container element for chat window -->
<div id="chat"></div>

<!-- import the JavaScript file -->
<script src="./component/Bubbles.js"></script>
<script>
// initialize by constructing a named function...
// ...and add text processing plugin:
var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", {
  // the one that we care about is inputCallbackFn()
  // this function returns an object with some data that we can process from user input
  // and understand the context of it

  // this is an example function that matches the text user typed to one of the answer bubbles
  // this function does no natural language processing
  // this is where you may want to connect this script to NLC backend.
  inputCallbackFn: function(o) {
    window.exchanger = window.exchanger || new window.Exchanger()
    console.log('enter text', o)
    const tempEventName = "temp-event-" + Math.floor( Math.random(1,1000)*1000000);
    window.bubbleContent = null
    let repeatText = "";
    const fn = ( event, args )=>{
      const typing = document.getElementsByClassName('bubble-typing')[0]
      typing.className = "bubble-typing"
      if( typeof args === 'string'){
        repeatText += args
        if( !window.bubbleContent ){
          chatWindow.talk(
          {
              "tosay": {
                says: [
                repeatText
                ],
                reply: []
              }
            },
            "tosay"
          )
        }else {
          window.bubbleContent.parentElement.style.width = ''
          window.bubbleContent.innerHTML = repeatText;
        }
      }else if( args.response ){
          window.bubbleContent.innerHTML = args.response.replace(/\n/g, '<br>');
          
          const convst = window.inputTextArea.getAttribute('conversationId')
          !convst && window.inputTextArea.setAttribute('conversationId', args.conversationId)
          window.inputTextArea.setAttribute('parentMessageId', args.parentMessageId)
          window.inputTextArea.setAttribute('messageId', args.messageId)
      }else if( args.data === '[DONE]'){
        window.bubbleContent = null
        typing.className = "bubble-typing imagine"
        window.exchanger.removeEvent( tempEventName, fn )
      }
    }
    window.exchanger.onEvent(tempEventName, fn)

    const opt = {
      message: o.input,
      callbackEvent: tempEventName
    }
    const convst = window.inputTextArea.getAttribute('conversationId')
    const paren = window.inputTextArea.getAttribute('parentMessageId')
    const mesid = window.inputTextArea.getAttribute('messageId')
    convst && (opt.conversationId = convst)
    mesid && (opt.parentMessageId = mesid)
    console.log( ' send option:::', opt )
    window.exchanger.put('chat-send-message', opt)

  }
}) // done setting up chat-bubble
chatWindow.talk(
  {
    "tosay": {
      says: [
        '欢迎使用chatGPT,我们可以聊天了🍦'
      ],
      reply: []
    }
  },
  "tosay"
)
// conversation object defined separately, but just the same as in the
// "Basic chat-bubble Example" (1-basics.html)
// var convo = {
//   ice: {
//     says: ["Hi", "Would you like banana or ice cream?"],
//     reply: [
//       {
//         question: "Banana",
//         answer: "banana"
//       },
//       {
//         question: "Ice Cream",
//         answer: "ice-cream"
//       }
//     ]
//   },
//   banana: {
//     says: ["🍌"],
//     reply: [
//       {
//         question: "Start Over",
//         answer: "ice"
//       }
//     ]
//   },
//   "ice-cream": {
//     says: ["🍦"],
//     reply: [
//       {
//         question: "Start Over",
//         answer: "ice"
//       }
//     ]
//   }
// }

// // pass JSON to your function and you're done!
// chatWindow.talk(convo)
</script>
</body>
